import React, { FC, useState } from "react";
import { useNavigate, Link } from "react-router-dom";
import {  Modal,Button, Divider, Space, Tag,message} from "antd";
import {
  FormOutlined,
  CopyOutlined,
  BarChartOutlined,
  StarTwoTone,
  StarOutlined,
  DeleteOutlined,
  ExclamationCircleFilled,
} from "@ant-design/icons";
import { useRequest } from "ahooks";
import{updataQuestionService,duplicateQuestionService}  from '../services/question'
import styles from "./QuestionCard.module.scss";

type PropsType = {
  _id: number;
  title: string;
  isPublished: boolean;
  isStar: boolean;
  answerCount: number;
  createdAt: string;
  deleteQuestion?: (_id: number) => void;
  publishQuestion?: (_id: number) => void;
};
// void 没有返回值
const QuestionCard: FC<PropsType> = (props) => {
  const nav = useNavigate();
  const { confirm } = Modal;
  const {
    _id,
    title,
    isStar,
    isPublished,
    createdAt,
    answerCount,
  } = props;
  //修改标星
  const [isStarState,setIsStarState]=useState(isStar)
  const {loading:changeStarLoading,run:changeStar} =useRequest(async ()=>{
    await updataQuestionService(_id,{isStar:!isStarState})
  },{manual:true,onSuccess(){
    setIsStarState(!isStarState) //更新
    message.success('已更新')
  }})

 //复制
  const {loading:duplicateLoading,run:duplicate} = useRequest(async ()=>{
    const data=await duplicateQuestionService(_id)
    return data
  },{
    manual:true,
    onSuccess(result:any){
      message.success('复制成功')
      nav(`/question/edit/${result.id}`)
    }
  })
  //删除
  const [isDeletedState,setIsDeletedState]=useState(false)
  const {loading:delLoading,run:confirmDel} =useRequest(async()=>{
    const data=await updataQuestionService(_id,{isDeleted:true})
    return data
  },{
    manual:true,
    onSuccess(res){
      setIsDeletedState(true)
       message.success('删除成功')
  }})
  function del(){
    confirm({
    title: '删除确认',
    icon: <ExclamationCircleFilled />,
    content:'是否要删除当前问卷?',
    okText: '确认 ',
    okType: 'primary',
    cancelText: '取消',
    onOk() {
      confirmDel()
    },
    onCancel() {
      console.log('Cancel');
    },
  });
  }
  //已经删除的问卷，不再渲染卡片了
  if(isDeletedState) return null
  return (
    <>
      <div className={styles.container}>
        <div className={styles.title}>
          <div className={styles.left}>
            <Link
              to={
                isPublished ? `/question/stat/${_id}` : `/question/edit/${_id}`
              }
            >
              {isStarState&&<StarTwoTone style={{color:'red'}}/>}
              {title}
            </Link>
          </div>
          <div className={styles.right}>
            <Space>
              <span>
                {isPublished ? ( 
                  <Tag color="processing" >已发布</Tag>
                ) : (
                  <Tag>未发布</Tag>
                )}
              </span>
              <span>答卷：{answerCount} 份</span>
              <span>{createdAt}</span>
            </Space>
            
          </div>
        </div>
        <Divider />
        <div className={styles["button-container"]}>
          <div className={styles.left}>
            <Space>
              <Button
                icon={<FormOutlined />}
                type="text"
                size="small"
                onClick={() => nav(`/question/edit/${_id}`)}
              >
                编辑问卷
              </Button>
              <Button
                icon={<BarChartOutlined />}
                type="text"
                size="small"
                onClick={() => nav(`/question/stat/${_id}`)}
                disabled={isPublished ? false : true}
              >
                数据统计
              </Button>
            </Space>
          </div>
          <div className={styles.right}>
            <Space>
              <Button
                icon={isStar ? <StarTwoTone /> : <StarOutlined />}
                type="text"
                size="small"
                onClick={changeStar}
                disabled={changeStarLoading}
              >
                {isStarState ? "取消星标" : "标星"}
              </Button>
              <Button icon={<CopyOutlined />} type="text" size="small" onClick={duplicate} disabled={duplicateLoading}>
                复制
              </Button>
              <Button icon={<DeleteOutlined />} type="text" size="small" onClick={del} disabled={delLoading}>
                删除
              </Button>
            </Space>
          </div>
        </div>
      </div>
    </>
  );
};
export default QuestionCard;
